<template>
  <div class="backComplete">
    <el-tabs v-model="activeName" type="card" class="elTabs">
      <el-tab-pane name="first">
        <div slot="label" class="pageHeader">待处理任务</div>
      </el-tab-pane>
    </el-tabs>
    <!-- 搜索查询 -->
    <div class="container">
      <div class="searchBar" v-show="showSearch">
        <div class="searchForm">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="80px"
          >
            <el-form-item label="任务名称:" prop="taskName">
              <el-input
                class="input"
                v-model="queryParams.taskName"
                placeholder="请输入任务名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="案件名称:" prop="caseName">
              <el-select
                v-model.trim="queryParams.caseName"
                filterable
                placeholder="请选择案件名称"
                class="input"
              >
                <el-option
                  v-for="item in cases"
                  :key="item.id"
                  :label="item.caseName"
                  :value="item.caseName"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务类型" prop="taskTypes">
              <el-select
                class="currentLinkinput"
                v-model="queryParams.taskTypes"
                placeholder="请选择任务类型"
              >
                <el-option
                  v-for="dict in dict.type.case_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当前环节" prop="currentLink">
              <el-select
                class="currentLinkinput"
                v-model="queryParams.currentLink"
                placeholder="请选择当前环节"
              >
                <el-option
                  v-for="dict in dict.type.current_link"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="searchButtons">
          <el-button class="searchButton" @click="handleQuery">搜索</el-button>
          <el-button class="resetButton" @click="resetQuery">重置</el-button>
        </div>
      </div>

      <div class="table">
        <el-table
          ref="multipleTable"
          class="tableArea"
          :data="tableData"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="任务名称"
            prop="taskName"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="所属案件"
            prop="caseName"
            :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
            label="案件类型"
            align="center"
            prop="taskType"
            width="110"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.case_type"
                :value="scope.row.taskType"
              ></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="涉案材料" align="center" width="110">
            <template slot-scope="scope">
              <el-button
                type="text"
                class="operationButton"
                @click="handleTasktype(scope.$index, scope.row)"
                >详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="visibleStatus"
            label="居住地址"
            width="150"
            align="left"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{
                scope.row.provinceName +
                scope.row.cityName +
                scope.row.countyName
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="当前环节"
            :show-overflow-tooltip="true"
            width="200"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.current_link"
                :value="scope.row.currentLink"
              ></dict-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="超期状态"
            width="100"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{scope.row.overtimeState}}
              <!-- <dict-tag
                :options="dict.type.overtime_state"
                :value="scope.row.overtimeState"
              ></dict-tag> -->
            </template>
          </el-table-column>

          <el-table-column label="操作" :width="dynamicWidth" fixed="right">
            <template slot-scope="scope">
              <div class="tableButtonArea">
                <el-button
                  type="text"
                  v-hasPermi="['waitTask:police']"
                  v-if="scope.row.currentLink == 1"
                  class="operationButton"
                  @click="policepassTask(scope.$index, scope.row)"
                  >公安调查取证</el-button
                >
                <el-button
                  type="text"
                  v-hasPermi="['waitTask:court']"
                  v-if="scope.row.currentLink == 1"
                  class="operationButton"
                  @click="courtpassTask(scope.$index, scope.row)"
                  >法院认定</el-button
                >
                <el-button
                  type="text"
                  class="operationButton"
                  @click="handleView(scope.$index, scope.row)"
                  >详情
                </el-button>
                <el-button
                  type="text"
                  v-if="!(scope.row.currentLink == 0)"
                  v-hasPermi="['waitTask:back']"
                  @click="handleBack(scope.$index, scope.row)"
                  class="operationButton"
                  >退回</el-button
                >
                <el-button
                  type="text"
                  v-hasPermi="['waitTask:do']"
                  @click="handleDo(scope.$index, scope.row)"
                  class="operationButton"
                  v-if="
                    scope.row.currentLink == 2 ||
                    scope.row.currentLink == 4 ||
                    scope.row.currentLink == 6 ||
                    scope.row.currentLink == 9
                  "
                  >处置
                </el-button>

                <el-button
                  type="text"
                  class="operationButton"
                  v-hasPermi="['waitTask:confirm']"
                  v-if="
                    scope.row.currentLink == 3 ||
                    scope.row.currentLink == 5 ||
                    scope.row.currentLink == 7
                  "
                  @click="passTask(scope.$index, scope.row)"
                  >确认
                </el-button>

                <!-- <el-button
                  type="text"
                  class="operationButton"
                  v-hasPermi="['waitTask:coll']"
                  @click="handleHelp(scope.$index, scope.row)"
                  >协同申请
                </el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 页码 -->
      <div class="tableFooter">
        <el-pagination
          background
          class="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <detailDrawer
      ref="detailModal"
      :type.sync="taskType"
      :id="id"
      @fatherMethod="fatherMethod"
    ></detailDrawer>

    <backModal
      ref="backModal"
      @fatherMethod="fatherMethod"
      :modalType.sync="modalType"
      :id="id"
    ></backModal>
    <doModal
      ref="doModal"
      :type.sync="doType"
      :id="id"
      @fatherMethod="fatherMethod"
    ></doModal>
  </div>
</template>

<script>
import { fatherMethod } from "../../../utils/commonMethods";
import {
  MODALTYPE,
  PAGENUM,
  PAGESIZE,
  TASKTYPE,
  DEPTTYPE,
  ROLETYPE,
} from "../../../utils/variable";
import detailDrawer from "../completeAuditing/component/detailDrawer.vue";
import backModal from "./component/backModal.vue";
import doModal from "./component/doDrawer.vue";
import { getCaseList } from "@/api/caseManage/case";

import { listTask, completeTask, claimTask } from "@/api/checkTask/task";
export default {
  dicts: ["case_type", "current_link", "overtime_state"],
  components: { detailDrawer, backModal, doModal },
  data() {
    return {
      cases: [],
      loading: false,
      currentPage: 0,
      //  显示搜索条件
      showSearch: true,
      personId: "",
      activeName: "first",
      //抽屉类型
      doType: "",
      taskType: "",
      modalType: "",
      type: "",
      id: "",
      taskName: "",
      // 查询参数
      queryParams: {
        pageNum: PAGENUM,
        pageSize: PAGESIZE,
        checkTaskType: TASKTYPE["待处理任务"],
        taskTypes: "",
        taskName: "",
        caseName: "",
        currentLink: "",
        taskId: 1,
      },
      passTaskquery: {},
      // 非多个禁用
      multiple: true,
      //选中数组
      ids: [],
      dateRange: [],
      selectedNum: 0,
      total: 0,
      // 表格数据
      tableData: [],
      // 案件id
      caseId: "",
      // 区域id
      oucode: "",
    };
  },
  created() {
    this.getList(this.queryRouterId);
    // console.log('osdadadwdadwadww :>> ',this.$store.state.user.roles==ROLETYPE[10]);
  },
  mounted() {
    this.getCase();
    this.$bus.$on("getTreePageParams", (caseId, oucode) => {
      this.oucode = oucode;
      this.caseId = caseId;
      this.getList(caseId, oucode);
    });
  },
  beforeDestroy() {
    this.$bus.$off("getTreePageParams");
  },
  computed: {
    visibleStatus() {
      if (
        this.$store.state.user.oucode.length == 6 &&
        this.$store.state.user.roles.indexOf(ROLETYPE[1]) !== -1
      ) {
        return true;
      } else {
        return false;
      }
    },
    // 1是公安上传
    dynamicWidth() {
      if (
        this.$store.state.user.dept.deptName == DEPTTYPE[7] ||
        this.$store.state.user.dept.deptName == DEPTTYPE[8]
      ) {
        return "100px";
      } else if (this.$store.state.user.roles[0] == ROLETYPE[10]||this.$store.state.user.roles[0] == ROLETYPE[11]) {
        return "300px";
      } else if (
        this.$store.state.user.roles[0] == ROLETYPE[1] ||
        this.$store.state.user.roles[0] == ROLETYPE[2] ||
        this.$store.state.user.roles[0] == ROLETYPE[4] ||
        this.$store.state.user.roles[0] == ROLETYPE[5] ||
        this.$store.state.user.roles[0] == ROLETYPE[6] ||
        this.$store.state.user.roles[0] == ROLETYPE[7]
      ) {
        return "200px";
      } else {
        return "230px";
      }
    },
    queryRouterId() {
      return this.$route.query.id;
    },
  },
  methods: {
    fatherMethod,
    getCase() {
      let params = {
        oucode: this.$store.state.user.oucode,
      };
      getCaseList(params).then((response) => {
        this.cases = response.data;
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList(this.queryRouterId);
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList(this.queryRouterId);
    },
    /** 查询任务列表 */
    getList(id, oucode) {
      this.loading = true;
      this.queryParams.caseId = id;
      this.queryParams.oucode = oucode;
      this.queryParams.taskName = this.queryParams.taskName.trim();
      this.queryParams.caseName = this.queryParams.caseName.trim();
      this.queryParams.userId = this.$store.state.user.userId;
      listTask(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
          this.$store.dispatch("getTotal");
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList(this.queryRouterId);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //涉案材料
    handleTasktype(index, row) {
      this.id = row.id;
      this.taskType = MODALTYPE["涉案材料"];
    },
    //处置
    handleDo(index, row) {
      this.id = row.id;
      this.doType = MODALTYPE["处置"];
    },
    //详情
    handleView(index, row) {
      this.id = row.id;
      this.taskType = MODALTYPE["详情"];
    },
    //申请协同
    // handleHelp(index, row) {
    //   this.id = row.id;
    //   this.taskName = row.taskName;
    //   this.modalType = MODALTYPE["新增"];
    // },
    allpassTask() {
      this.passTaskquery.userId = this.$store.state.user.userId;
      claimTask(this.passTaskquery).then((response) => {
        completeTask(this.passTaskquery).then((response) => {
          this.getList(this.queryRouterId);
        });
      });
    },
    // 公安调查取证
    policepassTask(index, row) {
      this.passTaskquery.flag = 0;
      this.passTaskquery.id = row.id;
      this.allpassTask();
    },
    // 法院认定
    courtpassTask(index, row) {
      this.passTaskquery.flag = 1;
      this.passTaskquery.id = row.id;
      this.allpassTask();
    },
    // 完成任务
    passTask(index, row) {
      this.passTaskquery.id = row.id;
      this.passTaskquery.userId = this.$store.state.user.userId;
      this.allpassTask();
    },
    //退回
    handleBack(index, row) {
      this.id = row.id;
      this.modalType = MODALTYPE["退回"];
    },
    // 新增
    Add() {
      this.type = MODALTYPE["新增"];
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
      this.selectedNum = val.length;
      this.multiple = !val.length;
    },
    //清空列表选择
    clearSelect() {
      this.$refs.multipleTable.clearSelection();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../assets/styles/variables.scss";

.backComplete {
  height: 100%;

  .tableFooter {
    text-align: right;
    justify-content: flex-end;
    // margin-top: 25px;
    margin-right: 35px;

    ::v-deep .btn-prev {
      color: #d4d3d3 !important;
      background-color: #fff;
      border: 1px solid #d4d3d3;
    }

    ::v-deep .btn-next {
      color: #d4d3d3 !important;
      background-color: #fff;
      border: 1px solid #d4d3d3;
    }

    ::v-deep .el-pager li {
      background-color: #fff;
      border: 1px solid #d4d3d3;
      font-size: 12px;
      font-family: $font-family;
      font-weight: 400;
      color: #5a5b5d;
    }
  }

  .el-form-item__label {
    font-family: $font-family;
    font-weight: $form-label-font-weight;
    font-size: $form-label-font-size;
    color: $form-label-color;
  }

  .el-input__inner {
    font-size: $form-content-font-size;
    font-family: $font-family;
    font-weight: $form-label-font-weight;
    // color: #AEAFB0;
  }
}

.input {
  width: 150px;
}

::v-deep .el-tabs--card .el-tabs__header {
  background-color: #e4e7ed;
}

::v-deep.el-tabs--card .el-tabs__header .el-tabs__item {
  border-radius: 10px solid black;
  background-color: #fff;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #053ef6;
  line-height: 48px;
  margin-top: 0;
}

.page {
  margin-top: 20px;
}

.currentLinkinput {
  width: 220px;
}
</style>
